window.vuecom_dropbox={
  template:`
    <div class="dropbox" 
      @dragover="dragoverFun" 
      @dragleave="dragleaveFun" 
      @drop="dropFun" :class="{'over':isFileOver}"
      @mousedown="mdHandle"
      @mousemove="mmHandle"
      @mouseup="muHandle"
    >
      {{tip}}
    </div>
  `,
  props:{
    tip:{
      type:String,
      default:'将视频文件拖到此处'
    }
  },
  data(){
    return {
      isFileOver:false,
      flag:false,
      clickFlag:false,
      tmpX:0,
      tmpY:0
    }
  },
  methods:{
    dragoverFun(event){
      event.preventDefault()
      this.isFileOver=true
    },
    dragleaveFun(event){
      
      event.preventDefault()
      this.isFileOver=false
    },
    dropFun(event){
      let _this=this
      event.preventDefault()

      let file=event.dataTransfer.files[0]
      _this.isFileOver=false

      _this.$emit('change',file)
    },
    mdHandle(){
      this.flag=true
      this.clickFlag=true
      this.tmpX=event.pageX
      this.tmpY=event.pageY
    },
    mmHandle(){
      this.clickFlag=false
      this.$emit('move')
      if (this.flag && window.electronApi){
        window.electronApi.setWindowPosition(event.pageX-this.tmpX,event.pageY-this.tmpY)
      }
    },
    muHandle(){
      if (this.clickFlag){
        this.$emit('mclick')
      }
      this.clickFlag=false
      this.flag=false
    }
  }
}